@charset "utf-8";


#web{
    height: 100%;
    overflow: hidden;
    #t_four{
        width: 100%;
        position: relative;
        .four-a{
            width: 100%;
            img{
                width: 100%;
                position: absolute;
                top: 30px;
                left: 0;
                right: 0;
                margin: auto;
                z-index: 100;
                transform: scale(1.5);
                animation: four-a 1.2s ease-in 0.2s infinite;
            }
        }
        .four-b{
            width: 100%;
            img{
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: auto;
                z-index: 101;
                transform: scale(1);
                opacity: 0;
                animation: four-b 0.5s linear 0.6s 1 forwards;
            }
        }
        .four-c{
            width: 100%;
            img{
                width: 92%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: auto;
                margin-top: 44%;
                opacity: 0;
                transform: rotate(0deg);
                z-index: 102;
                animation: four-c 0.7s linear 0.8s forwards 1;
            }
        }
        .four-c_1{
            width: 100%;
            img{
                width: 92%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: auto;
                margin-top: 44%;
                transform: rotate(0deg);
                opacity: 0;
                z-index: 102;
                animation: four-c_1 0.5s linear 1.4s infinite;
            }
        }
        .four-d{
            width: 100%;
            img{
                width: 22%;
                position: absolute;
                top: 0;
                left: 72%;
                right: 0;
                margin: auto;
                margin-top: 39%;
                z-index: 102;
                opacity: 0;
                transform: scale(1);
                animation: four-d 0.5s linear 1.3s infinite;
            }
        }
        .four-d_1{
            width: 100%;
            img{
                width: 22%;
                position: absolute;
                top: 0;
                left: 72%;
                right: 0;
                margin: auto;
                margin-top: 39%;
                z-index: 102;
                opacity: 0;
                transform: scale(1);
                animation: four-d_1 0.5s linear 1.7s infinite;
            }
        }
        .four-e{
            width: 100%;
            img{
                width: 58%;
                position: absolute;
                top:0;
                left: -17%;
                right: 0;
                margin: auto;
                margin-top: 18%;
                opacity: 0;
                z-index: 102;
                animation: four-e 0.8s linear 1.5s forwards 1 ;
            }
        }
        .four-e_1{
            width: 100%;
            img{
                width: 58%;
                position: absolute;
                top:0;
                left: -17%;
                right: 0;
                margin: auto;
                margin-top: 18%;
                opacity: 0;
                z-index: 102;
                animation: four-e_1 0.2s linear 1.9s infinite;
            }
        }
    }
}

@keyframes four-a{
    0%{
        transform: scale(1.5);
    }
    50%{
        transform: scale(2.5);
    }
    100%{
        transform: scale(1.5);
    }
}
@keyframes four-b{
    0%{
        opacity: 0;
        transform: scale(1);
    }
    25%{
        opacity: 1;
        transform: scale(0.98);
    }
    50%{
        opacity: 1;
        transform: scale(1.02);
    }
    75%{
        opacity: 1;
        transform: scale(0.98);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes four-c{
    0%{
        opacity: 0;
        transform: scale(1);
    }
    20%{
        opacity: 1;
        transform: scale(0.9);
    }
    40%{
        opacity: 1;
        transform: scale(1.1);
    }
    60%{
        opacity: 1;
        transform: scale(0.95);
    }
    80%{
        opacity: 1;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: scale(1);
    }
}
@keyframes four-c_1{
    0%{
        opacity: 1;
        transform: rotate(0deg);
    }
    25%{
        opacity: 1;
        transform: rotate(5deg);
    }
    50%{
        opacity: 1;
        transform: rotate(0deg);
    }
    75%{
        opacity: 1;
        transform: rotate(-5deg);
    }
    100%{
        opacity: 1;
        transform: rotate(0deg);
    }
}
@keyframes four-d{
    0%{
        opacity: 0;
        transform: scale(1);
    }
    20%{
        opacity: 1;
        transform: scale(0.95);
    }
    40%{
        opacity: 1;
        transform: scale(1.05);
    }
    60%{
        opacity: 1;
        transform: scale(0.98);
    }
    80%{
        opacity: 1;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: scale(1);
    }
}
@keyframes four-d_1{
    0%{
        opacity: 1;
        transform: scale(1);
    }
    25%{
        opacity: 1;
        transform: scale(0.95);
    }
    50%{
        opacity: 1;
        transform: scale(1.05);
    }
    75%{
        opacity: 1;
        transform: scale(0.98);
    }
    100%{
        opacity: 1;
        transform: scale(1.03);
    }
}
@keyframes four-e{
    0%{
       opacity: 1;
       transform: scale(1);
    }
    20%{
       opacity: 1;
       transform: scale(0.9);
    }
    40%{
       opacity: 1;
       transform: scale(1.1);
    }
    60%{
       opacity: 1;
       transform: scale(0.9);
    }
    80%{
       opacity: 1;
       transform: scale(1);
    }
    100%{
       opacity: 0;
       transform: scale(1);
    }
}
@keyframes four-e_1{
    from{
        opacity: 1;
        left: -17%;
    }
    to{
        opacity: 1;
        left: -17.5%;
    }
}
